<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!-- 引入JSTL -->
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--
    <link rel="stylesheet"
        href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script
        src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    -->
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <link rel="stylesheet"
          href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="${APP_PATH }/static/js/jquery-3.3.1.min.js"></script>
    <script
            src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <title>员工列表</title>

</head>

<body>
<div class="container">
    <h1 class="page-header">员工管理</h1>
    <div class="row">
        <h3 class="page-header col-md-10">员工列表</h3>
        <button class="page-header col-sd-1 btn btn-info">
            <span class="glyphicon glyphicon-plus"></span> 新增
        </button>
        <button class="page-header col-sd-1 btn btn-danger">
            <span class="glyphicon glyphicon-trash"></span> 删除
        </button>
    </div>

    <br>
    <div class="row">
        <table class="table table-striped table-hover">
            <thead>
            <tr>
                <th class="col-md-1">#</th>
                <th class="col-md-1">部门名称</th>
                <th class="col-md-1">员工姓名</th>
                <th class="col-md-1">性别</th>
                <th class="col-md-2">电子邮箱</th>
                <th class="col-md-2">创建时间</th>
                <th class="col-md-2">更新时间</th>
                <th class="col-md-2">操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${pageInfo.list }" var="employee">
                <tr>
                    <td class="col-md-1" style="vertical-align: middle;">${employee.employeeId }</td>
                    <td class="col-md-1" style="vertical-align: middle;">${employee.department.departmentName }</td>
                    <td class="col-md-1" style="vertical-align: middle;">${employee.employeeName }</td>
                    <td class="col-md-1" style="vertical-align: middle;">${employee.employeeGender }</td>
                    <td class="col-md-2" style="vertical-align: middle;">${employee.employeeEmail }</td>
                    <td class="col-md-2" style="vertical-align: middle;"><fmt:formatDate
                            value="${employee.gmtCreate }" pattern="yyyy-MM-dd" /></td>
                    <td class="col-md-2" style="vertical-align: middle;"><fmt:formatDate
                            value="${employee.gmtModified }" pattern="yyyy-MM-dd" /></td>
                    <td class="col-md-2" style="vertical-align: middle;">
                        <button class="btn btn-primary btn-xs">
                            <span class="glyphicon glyphicon-pencil"></span> 编辑
                        </button>
                        <button class="btn btn-danger btn-xs">
                            <span class="glyphicon glyphicon-trash"></span> 删除
                        </button>
                    </td>
                </tr>
            </c:forEach>

            <tr>
                <td style="vertical-align: middle;" colspan="5" class="col-md-6">当前 第
                    ${pageInfo.pageNum } 页，共 ${pageInfo.pages } 页，共有 ${pageInfo.total }
                    条记录。</td>
                <td style="vertical-align: middle;" colspan="3" class="col-md-6" align="right">
                    <nav aria-label="Page navigation">
                        <ul class="pagination pagination">
                            <li><a href="${APP_PATH }/employees?pageNum=1">首页</a></li>
                            <c:if test="${pageInfo.hasPreviousPage }">
                                <li><a
                                        href="${APP_PATH }/employees?pageNum=${pageInfo.pageNum-1 }"
                                        aria-label="Previous"> <span aria-hidden="true">&laquo;</span></a></li>
                            </c:if>
                            <c:forEach items="${pageInfo.navigatepageNums }"
                                       var="navigatePageNum">
                                <c:if test="${navigatePageNum == pageInfo.pageNum }">

                                    <li class="active"><a href="#">${navigatePageNum } <span
                                            class="sr-only">(current)</span></a></li>
                                </c:if>
                                <c:if test="${navigatePageNum != pageInfo.pageNum }">
                                    <li><a
                                            href="${APP_PATH }/employees?pageNum=${navigatePageNum }">${navigatePageNum }</a></li>
                                </c:if>

                            </c:forEach>
                            <c:if test="${pageInfo.hasNextPage }">
                                <li><a
                                        href="${APP_PATH }/employees?pageNum=${pageInfo.pageNum+1 }"
                                        aria-label="Next"> <span aria-hidden="true">&raquo;</span>
                                </a></li>
                            </c:if>
                            <li><a
                                    href="${APP_PATH }/employees?pageNum=${pageInfo.pages }">末页</a></li>
                        </ul>
                    </nav>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

</body>
</html>
